<template>
  <div>
    <addSales :params="addSalesShow" v-if="addSalesShow.show" @cancel="addSalesCancel" />
    <div v-else>
    <!-- <transition name="el-zoom-in-top"> -->
      <el-form :inline="true" class="search-form" label-width="100px" size="medium"  >
        <el-form-item label="基本信息：">
          <el-select v-model="res.params.marketId" placeholder="请选择商铺">
            <el-option v-for="item in res.marketOptions" :key="item.marketId" :label="item.marketName" :value="item.marketId">
            </el-option>
          </el-select>
          <el-select v-model="res.params.shopId" clearable placeholder="请选择店铺">
            <el-option v-for="item in res.shopOptions" :key="item.shopId" :label="item.shopName" :value="item.shopId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开票日期：">
          <el-date-picker v-model="res.params.billDate" name="billDate" id="billDate" type="date" format="yyyy-MM-dd" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <div>
        <el-form-item label="车辆信息：">
          <el-select clearable v-model="res.params.brandId" placeholder="请选择品牌">
            <el-option-group v-for="group in res.brandOptions" :key="group.initial" :label="group.initial">
              <el-option v-for="item in group.brandInfo" :key="item.brandId" :label="`${group.initial} - ${item.brandName}`" :value="item.brandId">
              </el-option>
            </el-option-group>
          </el-select>
          <el-select clearable v-model="res.params.seriesId" placeholder="请选择车系">
            <el-option v-for="item in res.seriesOptions" :key="item.seriesId" :label="item.seriesName" :value="item.seriesId">
            </el-option>
          </el-select>
          <el-select clearable v-model="res.params.modelId" placeholder="请选择车型">
            <el-option v-for="item in res.modeOptions" :key="item.modelId" :label="item.modelName" :value="item.modelId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" icon="el-icon-search" @click="querySubmit('isSearch')">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
        </el-form-item>
        </div>
      </el-form>
    <!-- </transition> -->
    <el-table :data="res.tableOptions" size="medium" border stripe class="imp-table" v-loading="res.loading">
      <el-table-column label="发票开具日期" width="120">
        <template slot-scope="scope">{{scope.row.billDate | filterDateForDay}}</template>
      </el-table-column>
      <el-table-column prop="billCode" label="发票代码" width="150"></el-table-column>
      <el-table-column prop="billPrice" label="发票金额(元)" width="120"></el-table-column>
      <el-table-column label="车型及号牌" width="100">
        <template slot-scope="scope">{{`${scope.row.billCarPlateHead}${scope.row.billCarPlateMiddle}${scope.row.billCarPlateCode}`}}</template>
      </el-table-column>
      <!--<el-table-column prop="billCarEngineNo" label="机动车发动机号" width="120"></el-table-column>-->
      <el-table-column prop="billCarVin" label="机动车车架号" width="180"></el-table-column>
      <el-table-column prop="billCarName" label="车辆名称" min-width="400"></el-table-column>
      <el-table-column prop="carType.carTypeName" label="车辆类型" width="80"></el-table-column>
      <!--<el-table-column label="转入地车管所" width="120">
				<template slot-scope="scope">{{`${scope.row.province.provinceName} ${scope.row.city.cityName}`}}</template>
			</el-table-column>-->
      <el-table-column prop="shop.market.marketName" label="市场" width="240"></el-table-column>
      <el-table-column label="操作" width="180" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="editSubmit(scope.row)">编辑</el-button>
          <el-button size="small" @click="toInfo(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="res.params.pageIndex" :page-size="res.params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="res.pageTotal">
      </el-pagination>
    </div>
    <infoSales :params="addSalesShow" v-if="addSalesShow.showInfo" />
    <el-dialog title="销售数据详情" size="medium" :visible.sync="edit.show" width="90%" :before-close="handleClosefn">
      <addSales :pros="edit" @handleClose="handleClose2" v-if="edit.show" />
    </el-dialog>
    </div>
  </div>
</template>
<script>
  import addSales from './addSales.vue'
  import infoSales from './infoSales.vue'
  export default {
    name: 'sales',
    data () {
      return {
        edit: {
          obj: {},
          show: false
        },
        res: {
          marketOptions: [],
          shopOptions: [],
          brandOptions: [],
          seriesOptions: [],
          modeOptions: [],
          tableOptions: [],
          params: {
            pageSize: 10,
            pageIndex: 1,
            marketId: this.$sess.marketId ? this.$sess.marketId : '1',
            shopId: '',
            brandId: '',
            seriesId: '',
            modelId: '',
            billDate: ''
          },
          pageTotal: 0,
          loading: false
        },
        addSalesShow: {
          show: false,
          edit: false,
          add: false,
          info: false,
          paramsData: {
            carTypeId: ''
          },
          showInfo: false
        }
      }
    },
    components: {
      addSales,
      infoSales
    },
    methods: {
      handleClosefn () {
        this.edit.show = false
      },
      handleClose2 () {
        this.edit.show = false
        // this.querySubmit()
      },
      handleSizeChange (val) {
        this.res.params.pageSize = val
        this.getSalesOptions(this.res)
      },
      getSalesOptions (val) {
        val.loading = true
        window.axios.get(this.$api.getSaleBillList, {
          params: val.params
        }).then((res) => {
          val.tableOptions = res.data.result
          val.loading = false
        })
      },
      getPageTotal (val) {
        window.axios.get(this.$api.getSaleBillNum, {
          params: val.params
        }).then((res) => {
          val.pageTotal = res.data.result.total
        })
      },
      handleCurrentChange (val) {
        this.res.params.pageIndex = val
        this.getSalesOptions(this.res)
      },
      querySubmit (isSearch) {
        if (isSearch) this.res.params.pageIndex = 1
        this.res.params.billDate = document.getElementById('billDate').value || ''
        this.getSalesOptions(this.res)
        this.getPageTotal(this.res)
      },
      resetForm () {
        this.res.params.brandId = ''
        this.res.params.shopId = ''
        this.res.params.marketId = this.$marketId
        this.res.params.billDate = ''
        this.$nextTick().then(() => {
          this.querySubmit()
        })
      },
      toInfo (obj) {
        this.addSalesShow.paramsData = obj
        this.addSalesShow.showInfo = true
      },
      editSubmit (obj) {
        this.edit.obj = obj
        this.edit.show = true
      },
      addSalesCancel (val) {
        if (val === true) {
          this.querySubmit()
        }
        this.addSalesShow.show = false
      }
    },
    created () {
      this.$store.commit('getMarketOptions', this.res)
      this.$store.commit('getBrandsOptions', this.res)
      this.$store.commit('getShopOptions', this.res)
      this.getSalesOptions(this.res)
      this.getPageTotal(this.res)
    },
    activated () {
      if (this.$route.params.id) this.addSalesShow.show = true
      else this.addSalesShow.show = false
    },
    deactivated () {
    },
    watch: {
      '$route.params.id' () {
        if (this.$route.params.id) this.addSalesShow.show = true
        else this.addSalesShow.show = false
      },
      'res.params.marketId' () {
        this.$nextTick().then(() => {
          this.res.shopOptions = []
          this.res.params.shopId = ''
          this.$store.commit('getShopOptions', this.res)
        })
      },
      'res.params.brandId' () {
        this.$nextTick().then(() => {
          this.res.seriesOptions = []
          this.res.params.seriesId = ''
          this.res.params.modelId = ''
          this.$store.commit('getSeriesOptions', this.res)
        })
      },
      'res.params.seriesId' () {
        this.$nextTick().then(() => {
          this.res.modeOptions = []
          this.res.params.modelId = ''
          this.$store.commit('getModeOptions', this.res)
        })
      }
    }
  }
</script>
<style type="text/css" scoped="scoped">
  .imp-table {
    width: 100% !important;
  }

  .el-table th>.cell {
    white-space: nowrap;
  }
</style>
